<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Tetris</title>
		<style type="text/css">
			body{
				text-align:center;
			}
			#tetris{
				margin:0 auto;
				width:450px;
			}
			#canvas{
				border:1px solid #bfbfbf;
				float:left;
				background-color:#000;
			}
			#tips{
				border:1px solid #bfbfbf;
				background-color:#000;
			}
			#dashboard {
				float:right;
			}
		</style>
	</head>
	<body>
		<div id="tetris">
			<h1>Tetris</h1>
			<canvas height="500" width="300" id="canvas"></canvas>
			<div id="dashboard">
				<canvas width="100" height="100" id="tips"></canvas>
				<div>Score <span id="score">0</span></div>
				<div>Level <span id="level">1</span></div>
				<input type="button" value="Start" id="start"/>
				<input type="button" value="Pause" id="pause"/>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="tetris.js"></script>
	<script type="text/javascript">
		var gameover = $('<div>').css({width:'300px',height:'500px',color:'#fff',fontSize:'72px',zIndex:'10',position:'absolute'}).html('GAME OVER');
		var t = tetris({
			score: function (s){
				$('#score').html(s);
			},
			over : function(){
				gameover.appendTo('#tetris');
			},
			level: function (s){
				$('#level').html(s);
			}
		});
		$('#start').click(function(){
			t.play();
		})
		$('#pause').toggle(function(){
			t.pause();
			$(this).val('Restore');
		}, function () {
			t.restore();
			$(this).val('Pause');
		})
	</script>
</html>
